<template>
  <qfTable :columns='columns' :tableData="tableData" align="center" 
  :tableLoading="tableLoading">
  <!-- 产品图片 -->
  <template v-slot:orderDetail[0].imageUrl="{row}">
    <img :src="row.orderDetail[0].imageUrl" width="60" alt="">
  </template>
  <!-- 操作按钮 -->
    <template v-slot:action="{ row }">
      <el-button size="small" type="primary" :disabled="row.order_status===4 || row.pay_status==1" @click="pay(row)">去支付</el-button>
      <el-button size="small" type="danger" @click="del(row)">删除</el-button>
    </template>
    <!-- 支付状态 -->
    <template v-slot:pay_status="{row}">
      {{row.pay_status===0?"未支付":"已支付"}}
    </template>
    <!-- 订单状态 -->
    <template v-slot:order_status="{row}">
      {{orderStatus(row)}}
    </template>
    
  </qfTable>
</template>
<script setup>
import * as api from "../../../../api/vip"
import { onMounted,ref } from "vue";
import qfTable from "../../../../components/qfTbale/index.vue"
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
let router=useRouter()
// 定义表格的列
let columns=[
  {
    label:'产品图片',
    prop:"orderDetail[0].imageUrl"
  },
  {
    label:'订单编号',
    prop:"order_id"
  },
  {
    label:'产品名称',
    prop:"orderDetail[0].productName"
  },
  {
    label:'数量',
    prop:"orderDetail[0].quantity"
  },
  {
    label:'总价格',
    prop:"total_fee"
  },
  {
    label:'创建时间',
    prop:"create_time"
  },
  {
    label:'支付状态',
    prop:"pay_status"
  },
  {
    label:'订单状态',
    prop:"order_status"
  },
  {
    label:'操作',
    prop:'action'
  }
  
]
// 表格数据
let tableData=ref([])
// 控制加载动画
let tableLoading=ref(false)
let getlist=async()=>{
tableLoading.value=true
try{
  let res=await api.getOrderApi()
  tableData.value=res.data.data
  tableLoading.value=false
}catch(e){
  console.log(e)
  tableLoading.value=false
}
}
getlist()

// 去支付
let pay=(row)=>{
  // 跳转到支付页面,通过query携带当前的order_Id
  console.log(row.order_id)
  router.push('/pay/preorder?order_id='+row.order_id)
}
// 订单状态
// 0未提交 1提交成功 2已经取消 3无效订单 4交易关闭 5退货
let orderStatus=(row)=>{
switch (row.order_status) {
  case 0:
    return '未提交'
  case 1:
    return '提交成功'
  case 2:
    return '已经取消'
  case 3:
    return '无效订单'
  case 4:
    return '交易关闭'
  case 5:
    return '退货'
}
}
// 删除
let del = (row) => {
  console.log(row)
    // 获取当前这条数据的id,传递给后台
    // 1.交互 让用户确定是否删除
    ElMessageBox.confirm('是否删除此订单', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    })
        .then(async () => {
            try {
                let res = await api.del_orderApi(row.order_id)
                ElMessage({
                    type: 'success',
                    message: '删除成功'
                })
                getlist()
            } catch (e) {
                ElMessage({
                    type: 'error',
                    message: '删除失败'
                })
            }
        })
        .catch(() => {
            ElMessage({
                type: 'warning',
                message: '已取消删除'
            })
        })
      }
</script>
<script>
export default{
    meta:{
        title: 'order',
         name: '订单管理',
        icon:'icon-shouye'
    }
}
</script>
